<template>
  <view>
    <!-- 活动社区页面 -->
    <u-collapse @change="change" @close="close" @open="open">
      <u-collapse-item title="社区公告" name="noticeList" icon="bell-fill">
        <u-cell-group>
          <u-cell title="社区公告">
            <view slot="title" class="u-slot-title tip">
              <view class="message">
                <text class="u-cell-text">社区公告</text>
                <span>因高温，15日-16日将限时供电，请见谅</span>
              </view>
              <span>昨天</span>
            </view>
          </u-cell>
        </u-cell-group>
      </u-collapse-item>
    </u-collapse>

    <u-collapse @change="change" @close="close" @open="open">
      <u-collapse-item title="社区消息" name="noticeList" icon="volume-fill">
        <u-cell-group>
          <u-cell title="社区消息">
            <view slot="title" class="u-slot-title tip">
              <view class="message">
                <text class="u-cell-text">社区信息</text>
                <span>明天天气转凉，请注意增加衣物</span>
              </view>
              <span>昨天</span>
            </view>
          </u-cell>
        </u-cell-group>
      </u-collapse-item>
    </u-collapse>

  </view>
</template>

<script>
  export default {
    data() {
      return {
      };
    },
    methods: {
      open(e) {
        // console.log('open', e)
      },
      close(e) {
        // console.log('close', e)
      },
      change(e) {
        // console.log('change', e)
      }
    }
  }
</script>

<style lang="scss">
  .tip {
    display: flex;
    justify-content: space-between;
    font-size: 14px;

    span {
      font-size: 12px;
      color: #c8c9cc;
    }

    .message {
      display: flex;
      flex-direction: column;

      span {
        margin-top: 5px;
        color: #82848a;
      }
    }
  }
</style>